<template>
  <div class="stepper-demo">
    <t-stepper
      v-model="step"
      class="fasr_stepper185741"
      :staticItems="staticItems"
      :headerNav="headerNav"
      :alternative-labels="alternativeLabels"
      :vertical="vertical"
      :isShowNav="isShowNav"
      :activeColor="'red'"
      @transition="emitTrasition"
      :clickNext="clickNext"
      :clickPrevious="clickPrevious"
      :tabIndex="2"
    >
      <template #default="defaultProps">
        <div :class="'inner_'+1">
          <div class="placeholder">
            自定义内容区域 步骤-1
          </div>
        </div>
        <div :class="'inner_'+2">
          <div class="placeholder">
            自定义内容区域 步骤-2
          </div>
        </div>
        <div :class="'inner_'+3">
          <div class="placeholder">
            自定义内容区域 步骤-3
          </div>
        </div>
      </template>
    </t-stepper>
    <div class="btn-line">
      <t-button class="tr-button-primary" @click="alternativeLabels = !alternativeLabels">
        切换 alternative-labels: {{ alternativeLabels + (alternativeLabels ? ' - 标题居下' : ' - 标题居右') }}
      </t-button>
      <t-button class="tr-button-primary" @click="headerNav = !headerNav">
        切换 header-nav: {{ headerNav + (headerNav ? ' - 导航式标题' : ' - 点击标题不可切换') }}
      </t-button>
      <t-button class="tr-button-primary" @click="isShowNav = !isShowNav">
        切换 is-show-nav: {{ isShowNav + (isShowNav ? ' - 自动生成按钮(上一步/下一步)' : ' - 不自动生成按钮') }}
      </t-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const refStepper = ref();
const step = ref(2);
const headerNav = ref(true)
const alternativeLabels = ref(false)
const vertical = ref(false)
const isShowNav = ref(true)

const emit = defineEmits(['click', 'update:modelValue']);
const _OnError = () => { };

onMounted(() => {

});
const staticItems = ref([
  {
    name: 1,
    title: '步骤1',
    done: false,
    caption: '',
  },
  {
    name: 2,
    title: '步骤2',
    done: false,
    caption: '',
    disable: false // 默认值即为 false
  },
  {
    name: 3,
    title: '步骤3',
    done: true,
    caption: ''
  }
])

const clickNext = () => {
  if (step.value < 3) {
    step.value++
  }
  // 可根据条件，设置每一步的 title（done，error，disable）状态
  // if(step.value === 1) staticItems.value[0].done = true
  // if(step.value === 2) staticItems.value[1].error = true
  // if(step.value === 6) staticItems.value[5].done = true
}
const clickPrevious = () => {
  step.value--
}
const emitUpdate = e => {
  console.log('father, T modelValue - ', e)
  step.value = e
}
const handleQModleValue = e => {
  console.log('father, Q modelValue - ', e)
  step.value = e
}
const emitTrasition = e => {
  console.log('emitTrasition - ', e)
}

</script>

<style lang="scss" scoped>
.stepper-demo {
  padding: 12px;
}
.btn-line {
  padding: 12px 0;
  .q-btn {
    margin-right: 12px;
    margin-bottom: 12px;
  }
}
.placeholder {
  height: 300px;
  border: 1px solid pink;
}
</style>
